<template>
	<view class="content">
		<!-- 底部导航栏 -->
		<nav-bar :title="companyTitle.name" :sendPhone="toPhone" :showCow="true"></nav-bar>
		<view class="headerImg w100">
			<image class="w100" :src="cover"></image>
		</view>
		<!-- 公司信息区域 -->
		<view class="company">
			<view class="header">
				<view class="df-cen">
					<view class="right">
						<image class="bor-500" :src="head"></image>
					</view>
					<view class="left df-end w100">
						<button class="btn mg-rl-20 bor-50" open-type="contact" >在线咨询</button>
						<image src="/static/icon/weixin.png" class="img"></image>
						<image src="/static/icon/phone.png" @click="toPhone()"></image>
					</view>
				</view>
				<view class="end">
					<view class="name mg-tb-20">{{companyTitle.name}}</view>
					<view class="address df-cen">
						<image src="/static/icon/address.png"></image>
						<view class="title" @click="openLocation()">
							{{companyTitle.address}}
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 轮播图 -->
		<view class="swiper">
			<index-swiper :swiperList="swiperList"></index-swiper>
		</view>

		<!-- 公告 -->
		<notice-list></notice-list>

		<!-- 就业列表 -->
		<employmentList></employmentList>

	</view>
</template>

<script setup>
	import {
		recommendGoods
	} from '../../api/goods';
	import {
		getImage,
		getNotice
	} from '/api/common.js';
	import {
		ref
	} from "vue"
	import employmentList from './components/employment-list.vue'
	const head='https://tse4-mm.cn.bing.net/th/id/OIP-C.DeLQoroPek6r9rBdsr1gWAHaF5?rs=1&pid=ImgDetMain'
	//封面
	const cover = ref('')
	//轮播
	const swiperList = ref([])
	/* 保存公司经纬度信息 */
	let companyTitle = ref({
		name: '永庆控股',
		address: '重庆市江北区大石坝东原D区1002号',
		phone: '18716221770',
		longitude: 120.029049, //经度
		latitude: 33.529888 //纬度
	})


	function toPage(url) {
		uni.navigateTo({
			url: url
		})
	}

	function openLocation() {
		console.log(1);
		if (!companyTitle.value.longitude || !companyTitle.value.latitude) return
		console.log(2);
		uni.openLocation({
			type: 'gcj02', //返回可以用于uni.openLocation的经纬度
			longitude: companyTitle.value.longitude,
			latitude: companyTitle.value.latitude,
			name: companyTitle.value.name,
			address: companyTitle.value.address
		});
	}
	/* 拨打电话 */
	function toPhone() {
		if (companyTitle.value.phone) {
			uni.makePhoneCall({
				phoneNumber: companyTitle.value.phone
			}, );
		}
	}

	//封面
	async function getImageList() {
		let res = await getImage({
			type:1,
			page:0
		})
		cover.value = res.data.data[0].images;
	}
	getImageList()
	//轮播
	const recommendGoodsFn = async () => {
		
		let res = await recommendGoods()
		let arr= res.data.data.filter((item) => {
			return !!item.icon
		})
		
		swiperList.value = arr.map((item) => {
			return {
				image: item.icon.split(',')[0],
				id: item.id
			}
		})
	}
	recommendGoodsFn()
</script>
<script>
	export default {
		onPageScroll(res) {
			uni.$emit('onPageScroll', res.scrollTop)
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		padding-top: 20rpx;
		background-color: #f4f4f4;
	}

	.headerImg {
		height: 350rpx;

		image {
			height: 350rpx;
			display: block;
		}
	}

	.company {
		position: relative;
		height: 250rpx;
		background-color: #ffffff;
		padding: 0rpx 30rpx 20rpx 30rpx;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		.header {
			position: absolute;
			top: -80rpx;

			// background-color: red;
			.right {
				image {
					width: 180rpx;
					height: 180rpx;
				}
			}

			.left {
				// background-color: red;
				height: 160rpx;
				// margin-top: 10rpx;

				.btn {
					width: 300rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background-image: linear-gradient(to right, #f23f43, #fc6b3f);
					color: #fff;

				}

				.img {
					margin-right: 10rpx;
				}

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.end {
				.name {
					font-weight: 600;
					font-size: 40rpx;
				}

				.address {
					font-size: 25rpx;
					color: #222222;

					image {
						width: 50rpx;
						height: 50rpx;
					}
				}
			}
		}

	}
</style>